<template>
  <el-input
    v-model="cityName"
    v-show="state"
    @keyup.enter="navigateToWeatherInfo"
    @blur="navigateToWeatherInfo"
    placeholder="请输入城市名称"
  />
  <slot name="weatherInfo1" v-if="!state"></slot>
  <slot name="weatherInfo2" v-if="!state"></slot>
</template>

<script setup>
import { storeToRefs } from "pinia"
import { useWeatherStore } from "../stores/Weather"
import { useRouter } from "vue-router"
const router = useRouter()
const { getAdcode } = useWeatherStore()
const { cityName, adcode ,state,isDisabled} = storeToRefs(useWeatherStore())

const navigateToWeatherInfo = async () => {
  console.log("不应该触发的")
  if (cityName.value) {
  await getAdcode(cityName.value) // 等待获取 adcode 的值
    router
      .push({
        name: "weatherInfo",
        params: { city: adcode.value },
        query: { search: cityName.value },
      })
      .then(() => {
        console.log("路由跳转到weatherInfo！")
        state.value=false
        isDisabled.value = true
      })
      .catch((error) => {
        console.error("路由跳转到weatherInfo失败：", error)
      })
      
  } else {
    router
      .push({ name: "weather" })
      .then(() => {
        console.log("路由跳转到weather！")
        state.value=true
      })
      .catch((error) => {
        console.error("路由跳转到weather失败：", error)
      })
      
  }
}
</script>

<style lang="scss" scoped>
.el-input {
  border: none;
  padding-left: 20%;
  padding-right: 20%;
  padding-top: 0px;
  height: 50px;
  :deep(.el-input__inner) {
    background-color: rgb(0, 102, 138);
    border: none;
    padding: 0px;
    margin: 0px;
    border-bottom: 1px solid white;
    height: 50px;
    line-height: 50px;
    color: white;
    font-size: 16px;
    font-weight: 600;

    &::placeholder {
      color: white;
      font-size: 16px;
      font-weight: 600;
    }

    &:focus {
      border: none;
      color: white;
      outline: none;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    &:active {
      border: none;
    }
  }
  :deep(.el-input__wrapper) {
    border: none;
    border-radius: 0;
    padding: 0px;
    margin: 0px;
    height: 50px;
    line-height: 50px;
  }
}


</style>
